<template>
  <div class="index">
    <!-- 轮播 -->
    <div @mouseenter="onEnter" @mouseleave="onLeave" class="banner">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item, index) in slideList" :key="index">
          <img :src="item.img" class="imgSize" />
        </swiper-slide>
        <!-- 小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- 上一张按钮 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <!-- 下一张按钮 -->
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <!-- 上传图片 -->
    <div class="inBox">
      <input type="file" ref="headImg" />
      <button @click="uploadImg">上传</button>
    </div>
  </div>
</template>
<script>
// 轮播图插件
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Index",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // 轮播图数组
      slideList: [
        {
          img: "img/banner/banner0_min.png",
        },
        {
          img: "img/banner/banner1_min.png",
        },
        {
          img: "img/banner/banner2_min.png",
        },
        {
          img: "img/banner/banner3_min.png",
        },
        {
          img: "img/banner/banner4_min.png",
        },
      ],
      // 控制轮播图插件配置的初始值
      swiperOption: {
        // 自动轮播
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        // 可循环切换
        loop: true,
        // 切换方式为淡入
        effect: "fade",
        // fade效果参数
        fadeEffect: {
          // 开启淡出
          crossFade: true,
        },
        // 分页器
        pagination: {
          // 分页器容器的css选择器或HTML标签
          el: ".swiper-pagination",
          // 点击分页器的指示点分页器会控制Swiper切换
          clickable: true,
        },
        // 使用前进后退按钮来控制Swiper切换
        navigation: {
          // 下一张按钮,类名
          nextEl: ".swiper-button-next",
          // 上一张按钮,类名
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  //计算属性，获得可以操作的swiper对象
  computed: {
    mySwiper() {
      // mySwiper 是要绑定到标签中的ref属性
      return this.$refs.mySwiper.$swiper;
    },
  },
  methods: {
    // 轮播移入停止自动轮播
    onEnter() {
      this.mySwiper.autoplay.stop();
    },
    // 轮播移出开始自动轮播
    onLeave() {
      this.mySwiper.autoplay.start();
    },
    uploadImg() {
      const file = this.$refs.headImg.files[0];
      const data = new FormData();
      data.append("headImg", file);
      data.append("id", 1);
      console.log("图片", file);
      console.log("上传", data);
      this.axios.put("/uploadImg", data).then((res) => {
        console.log(res);
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less">
// 轮播样式
.banner {
  overflow: hidden;
  font-size: 0;
  .imgSize {
    width: 100%;
  }
  .swiper-pagination-bullet {
    background: @cD;
    opacity: 0.8;
  }
  .swiper-pagination-bullet-active {
    background: @cG;
    opacity: 1;
  }
  .swiper-button-prev,
  .swiper-button-next {
    color: @cM;
    opacity: 0.8;
  }
}
</style>

